<template>
  <div style="height: 100%;background-color:white ;padding: 5px">
      <SolveBookTermConflictDialog ref="solveBookTermConflictDialog"
                           :conflictTermList="selectedConflictTermList"
                           :termBookMetadataId="termBookMetadata.id"
                           @merged="getTableData"/>
    <div>
      <div style="display: inline-block">
        <el-button icon="el-icon-back" type="text" @click="goBack">返回</el-button>
      </div>
      <div style="display: inline-block">|</div>
      <div style="display: inline-block;">
        <div style="padding-bottom: 10px;">
          <span
            style="font-family: 'Microsoft YaHei',sans-serif;display: inline-block;">当前图书:《{{termBookMetadata.name}}》</span>
          <span v-if="UTIL.isNotEmpty(termBookMetadata.version)"
                style="font-family: 'Microsoft YaHei',sans-serif;display: inline-block;">（{{termBookMetadata.version}}）</span>
        </div>
      </div>
      <div style="border-top: solid 5px #C9C9C9;">
        <el-row>
          <el-col :span="24">
            <el-tabs @tab-click="handleClick" v-model="activeName">
              <el-row>
                <el-col :span="24">
                  <div style="width: 420px; float: right">
                    <el-input placeholder="请输入术语名称" @keyup.enter.native="searchEnterFun($event)" v-model="term.name">
                      <i class="el-input__icon el-icon-search" slot="prefix"></i>
                      <el-button :icon="appendIcon" slot="append" v-on:click="switchAppend"></el-button>
                    </el-input>
                  </div>
                  <div id="advance"
                       style="padding: 10px; float: right;"
                       v-if="showAdvance">
                    <div>
                      <div style="margin-top: 10px; display: flex;">
                        <div class="advancedSearchLabel">目录分类</div>
                        <div style="width: 217px">
                          <el-input placeholder="请输入目录分类" @keyup.enter.native="searchEnterFun($event)"
                                    v-model="term.xmlClassify"></el-input>
                        </div>
                      </div>
                    </div>
                    <div style="margin-top: 30px; right: 10px;">
                      <el-row>
                        <el-col :offset="6"
                                :span="6">
                          <div style="margin-left: 90px;height: 32px; width: 88px;">
                            <el-button size="small"
                                       v-on:click="advanceCancel">取 消
                            </el-button>
                          </div>
                        </el-col>
                        <el-col :offset="2"
                                :span="2">
                          <div style="margin-left: 30px;height: 32px; width: 88px;">
                            <el-button size="small"
                                       v-on:click="reset">重置
                            </el-button>
                          </div>
                        </el-col>
                        <el-col :offset="2"
                                :span="2">
                          <div div
                               style="margin-left: 30px;height: 32px; width: 88px;">
                            <el-button size="small"
                                       type="success"
                                       v-on:click="advanceConfirm">确 定
                            </el-button>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-tab-pane label="原始术语" name="original">
                <el-table highlight-current-row :data="termData" border style="width: 100%;margin-top: 10px" stripe
                          :height="tableHeight">
                  <el-table-column label="术语名称" min-width="240" prop="name" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span v-html="scope.row.name"></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="目录分类" min-width="160" prop="xmlClassify"
                                   show-overflow-tooltip></el-table-column>
                  <el-table-column label="术语分类" min-width="160" prop="classify" show-overflow-tooltip></el-table-column>
                  <el-table-column label="英文名称" min-width="150" prop="englishName" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span v-html="scope.row.englishName"></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="英文简称" min-width="150" prop="englishAbbr" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span v-html="scope.row.englishAbbr"></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="同义词" min-width="150" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <div class="cell el-tooltip" v-for="(field, index) in scope.row.termList" :key="index">
                        <span>{{index + 1}}、{{field.typeName}}：<span v-html="field.name"></span>
                          <span v-if="field.englishName">(<span v-html="field.englishName"></span>)</span>
                        </span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" min-width="200">
                    <template slot-scope="scope">
                  <span><el-link type="primary"
                                 @click.prevent="updateTermById(scope.row.originalConceptId)">编辑</el-link></span>
                      <span><el-link type="primary"
                                     @click.prevent="detailTermById(scope.row.originalConceptId)">详情</el-link></span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="术语冲突列表" name="conflict">
                <el-table highlight-current-row :data="termData" :span-method="merge" border style="width: 100%;margin-top: 10px" stripe
                          :height="tableHeight">
                  <el-table-column label="序号" min-width="60" prop="sortNo" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span v-html="scope.row.sortNo"></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="术语名称" min-width="240" prop="name">
                    <template slot-scope="scope">
                      <span v-html="scope.row.name"></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="目录分类" min-width="160" prop="xmlClassify"></el-table-column>
                  <el-table-column label="术语分类" min-width="160" prop="classify"></el-table-column>
                  <el-table-column label="英文名称" min-width="150" prop="englishName">
                    <template slot-scope="scope">
                      <span v-html="scope.row.englishName"></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="英文简称" min-width="150" prop="englishAbbr">
                    <template slot-scope="scope">
                      <span v-html="scope.row.englishAbbr"></span>
                    </template>
                  </el-table-column>
                  <el-table-column label="同义词" min-width="150">
                    <template slot-scope="scope">
                      <div class="cell el-tooltip" v-for="(field, index) in scope.row.termList" :key="index">
                        <span>{{ index + 1 }}、{{ field.typeName }}：<span v-html="field.name"></span>
                          <span v-if="field.englishName">(<span v-html="field.englishName"></span>)</span>
                        </span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" min-width="200">
                    <template slot-scope="scope">
                  <span><el-link type="primary"
                                     @click.prevent="solveConflictTerm(scope.row.conflictConceptId)">解决冲突</el-link></span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
        <el-row>
          <div style="margin-top: 10px">
            <el-pagination :page-size="pageSize" :total="totalNum" @current-change="handleCurrentChange" background
                           layout="total, prev, pager, next, jumper" style="text-align: right;"
                           v-if="multiplePages"></el-pagination>
          </div>
        </el-row>
      </div>
    </div>
    <el-drawer v-if="dialogVisible" :size="CONST.WORKSPACE_WIDTH + 'px'" :visible="dialogVisible"
               title="详情"
               @close="dialogVisible = false">
      <TermDetail :originalConceptId="originalConceptId"></TermDetail>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-drawer>
  </div>
</template>

<script>
import SolveBookTermConflictDialog from "./SolveBookTermConflictDialog";
import TermDetail from "./TermDetail";

export default {
  components: {TermDetail, SolveBookTermConflictDialog},
  name: "BookTermDetail",
  data() {
    return {
      tableHeight: '',
      termBookMetadata: {},
      termData: [],
      multiplePages: true,
      noData: true,
      totalNum: 0,
      currentPage: 0, // 第几页
      pageSize: 10, // 每页显示的数据个数
      activeName: 'original',
      term: {},
      appendIcon: "el-icon-caret-bottom",
      showAdvance: false,
      selectedConflictTermList: [],
      dialogVisible: false,
      originalConceptId: ''
    }
  },
  methods: {
    getTableData: function () {
      this.term.currentPage = this.currentPage;
      this.term.pageSize = this.pageSize;
      let param = new URLSearchParams();
      param.append("term", JSON.stringify(this.term));
      this.axios.post('/pmph/action/term/selectTermList', param).then((response) => {
        this.termBookMetadata = response.data;
        this.termData = response.data.termList;
        this.totalNum = response.data.totalNum;
        if (this.term.queryType === 'conflict') {
          this.setrowspans();
        }
      })
    },
    //返回按钮点击事件
    goBack: function () {
      this.$router.push("/term");
    },
    handleCurrentChange: function (val) {
      this.currentPage = val - 1;
      this.getTableData();
    },
    updateTermById: function (originalConceptId) {
      this.$router.push({
        path: '/term/update',
        query: {
          originalConceptId: originalConceptId
        }
      })
    },
    detailTermById: function (originalConceptId) {
      this.originalConceptId = originalConceptId;
      this.dialogVisible = true;
    },
    solveConflictTerm(conflictId) {
      // 根据冲突id, 查找冲突集合;
      this.selectedConflictTermList = this.termData.filter(item => item.conflictConceptId === conflictId);
      this.$refs.solveBookTermConflictDialog.visible = true
    },
    selfChecking(id) {
      let status = this.$route.query.status;
      if (!(status === '1' || status === '6')) {
        this.$message.warning("这本书已经自检过,不能再次自检");
        return;
      }
      this.axios.get('/pmph/action/term/selfChecking', {
        params: {
          id: id
        }
      }).then((response) => {
        this.getTableData();
        this.timer = setInterval(this.getTableData, 3000);
        this.noData = response.data.totalNum <= 0;
        this.tableData = response.data.tableData;
        this.totalNum = response.data.totalNum;
      }).catch((error) => {
        console.error(error);
        this.tableData = [];
        this.noData = true;
        this.$message.error("未能请求到数据");
      })
    },
    searchEnterFun(e) {
      const keyCode = window.event ? e.keyCode : e.which;
      if (keyCode === 13) {
        this.currentPage = 0;
        this.getTableData();
      }
    },
    handleClick(tab) {
      this.reset();
      this.termData = [];
      this.totalNum = 0;
      this.term.queryType = tab.name;
      this.getTableData();
    },
    reset() {
      this.term.name = '';
      this.term.xmlClassify = '';
    },
    advanceCancel: function () {
      this.showAdvance = false;
    },
    advanceConfirm: function () {
      this.currentPage = 0;
      this.getTableData();
      this.showAdvance = false;
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    /*
    这个方法是
    控制单元格的
    返回值是一个对象
    例如：返回
        return {
          rowspan: 2,
          colspan: 1
        }
    是把当前的一个单元格和正下方的单元格合并
    且
    下一个单元格要返回
        return {
          rowspan: 0,
          colspan: 0
        }
     这是API给的
     我发现
     返回
         return {
          rowspan: 0,
          colspan: 1
        }
      也是可以的
      那合并单元格就十分容易了
      前提是数据已经根据id进行排序
     假如id为3的有四个数据
     只需要返回
     [4，1]
     [0，1]
     [0，1]
     [0，1]
     即可
     用下面的setrowspans方法进行处理即可
     */
    merge({row, col, rowIndex, columnIndex}) {
      if (columnIndex === 0 || columnIndex === 7) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        }
      }
    },
    setrowspans() {
      // 先给所有的数据都加一个v.rowspan = 1
      this.termData.forEach(v => {
        v.rowspan = 1;
      });
      // 双层循环
      for (let i = 0; i < this.termData.length; i++) {
        // 内层循环，上面已经给所有的行都加了v.rowspan = 1
        // 这里进行判断
        // 如果当前行的id和下一行的id相等
        // 就把当前v.rowspan + 1
        // 下一行的v.rowspan - 1
        for (let j = i + 1; j < this.termData.length; j++) {
          //此处可根据相同字段进行合并，此处是根据的id
          if (this.termData[i].conflictConceptId === this.termData[j].conflictConceptId) {
            this.termData[i].rowspan++;
            this.termData[j].rowspan--;
          }
        }
        // 这里跳过已经重复的数据
        i = i + this.termData[i].rowspan - 1;
      }
    }
  },
  activated() {
    if (UTIL.isNotEmpty(this.$route.query.id)) {
      this.term.termBookMetadataId = this.$route.query.id;
    }
    if (!this.$route.meta.isUseCache) {
      this.getTableData();
    }
  },
  beforeRouteLeave(to, from, next) {
    // 列表页面跳转到 详情页时，设置需要缓存
    if (to.name == 'Term') {
      from.meta.isUseCache = true
    }
    next()
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 230;
    this.term.termBookMetadataId = this.$route.query.id;
    this.getTableData();
  }
}
</script>

<style scoped>
</style>
